<template>
  <ArmyPanelLayout class="barracksLeftOne" title="设备状态">
    <BtnGroupDevideTab :tabList="tabList" :tabActive="tabActive" @change="tabChangeAction"></BtnGroupDevideTab>
    <div class="barracksLeftOne-chart" :id="sid"></div>
  </ArmyPanelLayout>
</template>

<script>
import ArmyPanelLayout from '@/views/armyScreen/comp/ArmyPanelLayout.vue'
import BtnGroupDevideTab from '@/views/armyScreen/comp/BtnGroupDevideTab.vue'
import { deviceOnline } from '@/api/armyScreenApi.js'
import { random14 } from '@/util/utils.js'
import * as echarts from 'echarts'
import useCommonMethods from '@/mixin/useCommonMethods.js'
import $bus from '@/util/bus.js'


export default {
  inject: ['screenContext'],
  components: {
    ArmyPanelLayout,
    BtnGroupDevideTab
  },
  data () {
    return {
      sid: 'chart_' + random14(),
      tabList: [],
      tabActive: 1,
      pieData: {
        total: 0,
        list: []
      },
      deviceInfo: {
        "deviceNum": null,
        "onlineNum": null,
        "notOnlineNum": null,
        "onlineRate": null,
        "notOnlineRate": null
      }
    }
  },
  setup () {
    const {dictByTypeService} = useCommonMethods()
    return {
      dictByTypeService
    }
  },
  async mounted () {
    // 设备类型 - deviceType
    const {data} = await this.dictByTypeService('deviceType')
    const dictArr = data?.list || [
      // {
      //   "dictCode": 1, // 字典code
      //   "value": 1, // 字典code
      //   "label": '摄像机', // 	字典值
      //   "dictValue": '摄像机', // 	字典值
      //   "sort": 1 // 	排序
      // },
      // {
      //   "dictCode": 2, // 字典code
      //   "value": 2, // 字典code
      //   "label": '报警设备', // 	字典值
      //   "dictValue": '报警设备', // 	字典值
      //   "sort": 1 // 	排序
      // },
      // {
      //   "dictCode": 3, // 字典code
      //   "value": 3, // 字典code
      //   "label": '门禁', // 	字典值
      //   "dictValue": '门禁', // 	字典值
      //   "sort": 1 // 	排序
      // },
    ]
    dictArr.forEach(item => {
      item.value = item.dictCode
      item.label = item.dictValue
    })
    this.tabList = dictArr
    this.tabActive = dictArr[0].dictCode
    this.deviceOnlineService()
    $bus.on('reRequest', this.deviceOnlineService)
  },
  beforeUnmount() {
    $bus.off('reRequest', this.deviceOnlineService)
  },
  methods: {
    /**
     * tab标签切换 触发的事件
     * @param value {string} tab标签切换的值
     */
    tabChangeAction (value) {
      this.tabActive = value
      this.deviceOnlineService()
    },
    deviceOnlineService () {
      const paramObj = {
        "deviceType": this.tabActive
      }
      deviceOnline(paramObj).then(res => {
        const data = res.data
        this.pieData = {
          total: 0,
          list: []
        }
        this.pieData.total = data?.deviceNum || 0
        this.pieData.list.push({
          name: '在线',
          value: data?.onlineNum || 0,
          percent: data?.onlineRate || 0
        })
        this.pieData.list.push({
          name: '离线',
          value: data?.notOnlineNum || 0,
          percent: data?.notOnlineRate || 0
        })

        this.initChart()
      })
    },
    // 按学校统计监控点在离线
    changeTab (tab) {
      this.tabActive = tab
      this.cameraOnOfflineBySchool()
    },
    initChart () {
      this.chart && this.chart.dispose()
      this.chart = echarts.init(document.getElementById(this.sid))
      let subtext = '设备数'
      if (this.tabActive === 'camera') {
        subtext = '通道数'
      } else if (this.tabActive === 'all') {
        subtext = '总数'
      }
      const option = {
        title: {
          text: '0',
          subtext: subtext,
          x: '12%',
          y: '27%',
          textStyle: {
            fontSize: 24,
            color: '#F2F7FF',
            fontWeight: 600
          },
          subtextStyle: {
            fontSize: 16,
            color: '#F2F7FF',
            fontWeight: 400
            // align: 'center'
          },
          textAlign: 'center'
        },
        // 饼状图类型以及数据源
        color: ['#00E279', '#F45151'],
        legend: {
          icon: 'rect',
          orient: 'vertical', // 图例的布局，水平布局、垂直布局
          itemWidth: 16, // 图例宽度
          itemHeight: 16, // 图例高度
          itemGap: 26,//图例之间的间隙
          left: 138,//图例位置
          y: 'center',
          textStyle: {
            color: '#000000',
            fontSize: 16,
            fontFamily: '微软雅黑',
            fontWeight: 400,
            padding: [4, 0, 0, 20],
            // 设置图例字体
            rich: {
              a: {
                width: 46,
                color: '#FFFFFF'
              },
              b: {
                width: 48,
                color: '#FFFFFF'
              },
              c: {
                width: 26,
                color: '#FFFFFF'
              },
              d: {
                width: 46,
                color: '#FFFFFF'
              }
            }
          },
          // 设置图例百分比和名称
          formatter: function (item) {
            const data = option.series[0].data
            let value
            let percent
            for (let i = 0; i < data.length; i++) {
              if (data[i].name === item) {
                value = data[i].value
                percent = (data[i].percent * 100).toFixed(2) + '%'
              }
            }
            const result = value + '个'
            const line = '|'
            const arr = [
              '{a|' + item + '}',
              '{b|' + result + '}',
              '{c|' + line + '}',
              '{d|' + percent + '}'
            ]
            return arr.join(' ')
          },
          tooltip: {
            show: true
          }
        },
        series: [
          {
            type: 'pie',
            data: null,
            center: ['51', '50%'],
            radius: ['100%', '87%'],
            labelLine: {
              show: false
            },
            label: {
              show: false
            }
          }
        ],
        tooltip: {
          show: true
        }
      }
      option.title.text = this.pieData.total
      option.series[0].data =  this.pieData.list
      this.chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.barracksLeftOne {
  width: 439px;
  height: 226px;
  &-tabList {
    margin: 16px 0 24px 21px;
    display: flex;
    justify-content: flex-start;
    &_item {
      cursor: pointer;
      height: 24px;
      padding: 0 10px;
      line-height: 24px;
      background-image: linear-gradient(270deg, rgba(0,97,165,0.58) 0%, #0059A4 100%);
      border-radius: 2px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: rgba(167,222,255, 0.5);
      font-weight: 400;
      margin-right: 12px;
    }
    .selected {
      background-image: linear-gradient(270deg, rgba(17,85,152,0.58) 0%, #00A3FA 100%);
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #C9EBFF;
      font-weight: 600;
    }
  }
  &-chart {
    margin-left: 21px;
    width: 379px;
    height: 98px;
  }
}
</style>
